<template>
	<view>
	<view class="mybutm">
		<view
			@tap="voice = !voice"
			class="iconfont addleft"
			:class="!voice ? 'icon-jianpan' : 'icon-yuyin'"
		></view>
		<view class="addcenter">
			<view v-if="voice">
				<textarea
					auto-height
					class="textarecs"
					@blur="bindTextAreaBlur"
					maxlength="300"
					v-model="text"
					@confirm="subtarea"
				></textarea>
				<view class="subcs" @tap="tapSubmit">发送</view>
			</view>
		<button  v-else class="voicbtncs"   @tap="emitadd"  ref="submian">
			按住&nbsp;说话
		</button>
		</view>
		
		<view class="addright">
			<view class="iconfont icon-xiaolian"></view>
			<view class="iconfont icon-jiahao"></view>
		</view>
	</view>
	
	</view>
</template>

<script>
	
	const recorderManager = uni.getRecorderManager();
	const innerAudioContext = uni.createInnerAudioContext();
	innerAudioContext.autoplay = true;
import { mapState, mapMutations, mapActions } from 'vuex';
export default {
	data() {
		return {
			voice: true,
			ishow:false,
			text: ''
		};
	},

	computed: {
		// 语音小于10秒 都返回最小长度15%
		// 语音长度随语音秒数变化
		...mapState('m_imvido', ['vidodata'])
	},
	methods: {
		...mapActions('m_imvido', ['addactionim']),
		...mapMutations('m_imvido', ['IMVIDOACTION']),
		bindTextAreaBlur: function(e) {
			// console.log(e.detail.value)
		},
		subtarea() {
			this.addactionim({text:this.text});
			// this.$emit('emiteart', this.text);
			this.text = '';
		},
		tapSubmit() {
			this.addactionim({text:this.text});
			// this.$emit('emiteart', this.text);
			this.text = '';
		},
		emitadd() {
			// #ifndef H5
			this.$emit('myvoice',this.ishow);
		// #endif
			// this.$refs.submian.innerHTML = '松开发送'
			// this.$refs.submian.style.color = 'red'
		}
	}
};
</script>
<style lang="scss" scoped>
.mybutm {
	display: flex;
	position: fixed;
	// height: 140rpx;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 10rpx 0 40rpx 0;
	background-color: #fff;
	.addleft {
		&::after {
			display: block;
			content: '';
			height: 50px;
		}
		width: 80rpx;
		display: flex;
		justify-content: center;
		align-items: flex-end;
	}
	.addcenter {
		position: relative;
		background-color: aliceblue;
		width: calc(100vw - 240rpx);
		display: flex;
		align-items: center;
		.textarecs {
			width: calc(100vw - 240rpx);
			height: 50rpx;
			padding-right: 80rpx;
			box-sizing: border-box;
		}
		.voicbtncs {
					font-size: 16rpx;
					width: calc(100vw - 240rpx);
					height: 100%;
					display: flex;
					align-items: center;
					justify-content: center;
		}
		.subcs {
			position: absolute;
			right: 20rpx;
			bottom: 0;
			width: 60rpx;
			height: 100%;
			font-size: 12rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #f8f8f8;
			border-radius: 10rpx;
			background: linear-gradient(to right, #3388ee, #4db9f1);
		}
	}
	.addright {
		display: flex;
		align-items: flex-end;
		justify-content: space-around;
		width: 160rpx;
	}
}
</style>
